<!-- pages/user/add-bank-card.vue -->
<template>
	
	<view class="add-bank-card">
	  <view class="amount-section">
	    <view class="amount-label">支付金额</view>
	    <view class="amount-value">
	      <text class="currency">¥</text>
	      <text class="number">{{ amount }}</text>
	    </view>
	</view>
    <!-- 表单区域 -->
    <view class="form-section">
      <!-- 持卡人信息 -->
      <view class="form-item">
        <view class="label">持卡人</view>
        <input 
          type="text"
          v-model="formData.holderName"
          placeholder="请输入持卡人姓名"
          maxlength="20"
        />
      </view>

      <!-- 身份证号 -->
      <view class="form-item">
        <view class="label">身份证号</view>
        <input 
          type="idcard"
          v-model="formData.idCard"
          placeholder="请输入身份证号码"
          maxlength="18"
        />
      </view>

      <!-- 银行卡号 -->
      <view class="form-item">
        <view class="label">银行卡号</view>
        <input 
          type="number"
          v-model="formData.cardNumber"
          placeholder="请输入银行卡号"
          maxlength="19"
        />
      </view>

      <!-- 发卡银行 -->
      <!-- <view class="form-item" @tap="showBankSelect">
        <view class="label">发卡银行</view>
        <view class="value" :class="{ placeholder: !formData.bankName }">
          {{ formData.bankName || '请选择发卡银行' }}
        </view>
        <text class="iconfont icon-right"></text>
      </view> -->

      <!-- 预留手机号 -->
      <view class="form-item">
        <view class="label">预留手机号</view>
        <input 
          type="number"
          v-model="formData.phone"
          placeholder="请输入银行预留手机号"
          maxlength="11"
        />
      </view>

      <!-- 验证码 -->
      <view class="form-item verify-code">
        <view class="label">验证码</view>
        <input 
          type="number"
          v-model="formData.verifyCode"
          placeholder="请输入验证码"
          maxlength="6"
        />
        <view 
          class="send-code" 
          :class="{ disabled: !canSendCode || countdown > 0 }"
          @tap="sendVerifyCode"
        >
          {{ countdown > 0 ? `${countdown}s后重发` : '获取验证码' }}
        </view>
      </view>
    </view>

    <!-- 提示信息 -->
    <view class="tips">
      <text class="iconfont icon-info"></text>
      <text>请确保该银行卡已开通网银支付功能</text>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-section">
      <button 
        class="submit-btn" 
        :disabled="!canSubmit"
        @tap="getOrderPay"
      >
        确认支付
      </button>
	  <view class="agreement">
	          <checkbox v-model="agreed" />
	          <text>我已阅读并同意</text>
	          <text class="link" @tap="showAgreement">《快捷支付服务协议》</text>
	        </view>
    </view>

    <!-- 银行选择弹窗 -->
    <uni-popup ref="bankPopup" type="bottom">
      <view class="bank-popup">
        <view class="popup-header">
          <text>选择银行</text>
          <text class="close" @tap="closeBankSelect">关闭</text>
        </view>
        <scroll-view scroll-y class="bank-list">
          <view 
            class="bank-item"
            v-for="bank in bankList"
            :key="bank.id"
            @tap="selectBank(bank)"
          >
            <image :src="bank.icon" class="bank-icon" />
            <text class="bank-name">{{ bank.name }}</text>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
	import request from "@/utils/request.js";
	import {
		orderPay,
		wechatQueryPayResult
	} from '@/api/order.js';
	import {
		openOrderSubscribe
	} from '@/utils/SubscribeMessage.js';
	import {
		Debounce
	} from '@/utils/validate.js'
	import {
		mapGetters
	} from "vuex";
	let app = getApp();
export default {
  data() {
    return {
		orderNo: '',
		amount: '0.00', // 支付金额
		payType: 'quick',
		payChannel: 'quick',
		agreed: false, // 是否同意协议
      formData: {
        holderName: '', // 持卡人姓名
        idCard: '', // 身份证号
        cardNumber: '', // 银行卡号
        bankName: '', // 发卡银行
        bankCode: '', // 银行编码
        phone: '', // 预留手机号
        verifyCode: '' // 验证码
      },
	  token: '',
      bankList: [], // 银行列表
      countdown: 0, // 验证码倒计时
      timer: null, // 定时器
	  canSubmit: false
    }
  },

  computed: {
    // 是否可以发送验证码
    canSendCode() {
      return this.formData.phone && 
             this.formData.phone.length === 11
    },

    // 是否可以提交
    // canSubmit() {
    //   return this.formData.holderName && 
    //          this.formData.idCard && 
    //          this.formData.cardNumber && 
    //          this.formData.phone && 
    //          this.formData.verifyCode
    // }
  },

  onLoad(options) {
    // this.getBankList()
	this.amount = options.payPrice;
	this.orderNo = options.orderNo;
  },

  onUnload() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },

  methods: {
    // 获取银行列表
    // async getBankList() {
    //   try {
    //     const res = await this.$http.get('payment/bank-list')
    //     this.bankList = res.data
    //   } catch (error) {
    //     this.$utils.toast('获取银行列表失败')
    //   }
    // },

    // 银行卡号输入处理
    onCardNumberInput(e) {
      let value = e.detail.value.replace(/\s/g, '')
      // 每4位添加空格
      value = value.replace(/(\d{4})(?=\d)/g, '$1 ')
      this.formData.cardNumber = value
    },

    // 显示银行选择
    // showBankSelect() {
    //   this.$refs.bankPopup.open()
    // },

    // // 关闭银行选择
    // closeBankSelect() {
    //   this.$refs.bankPopup.close()
    // },

    // // 选择银行
    // selectBank(bank) {
    //   this.formData.bankName = bank.name
    //   this.formData.bankCode = bank.code
    //   this.closeBankSelect()
    // },

    // 发送验证码
    async sendVerifyCode() {
      if (!this.canSendCode || this.countdown > 0) return
	
      try {
		  // alert(this.formData.phone)
		request.post('pay/payment/sendCode', {
          mobPhone: this.formData.phone,
          cardNo: this.formData.cardNumber,
		  name: this.formData.holderName,
		  idNo: this.formData.idCard,
		  orderNo: this.orderNo,
		  payType: this.payType,
		  payChannel: this.payChannel
        }).then(res => {
			if(res.code == 200) {
				this.token = res.data
				this.canSubmit = true
				uni.showToast({
					title: '验证码已发送',
					icon: 'none'
				})
				this.startCountdown()
			} else {
				uni.showToast({
					title: res.data,
					icon: 'none'
				})
			}
		}).catch(res => {
			uni.showToast({
				title: '验证码发送失败',
				icon: 'none'
			})
		})
		
		// this.token = '1111'
		// this.canSubmit = true
		// uni.showToast({
		// 	title: '验证码已发送',
		// 	icon: 'none'
		// })
		// this.startCountdown()
        
      } catch (error) {
        uni.showToast({
        	title: '验证码发送失败',
        	icon: 'none'
        })
      }
    },

    // 开始倒计时
    startCountdown() {
      this.countdown = 60
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--
        } else {
          clearInterval(this.timer)
        }
      }, 1000)
    },

    // 表单验证
    validateForm() {
      // 姓名验证
      if (!/^[\u4e00-\u9fa5]{2,20}$/.test(this.formData.holderName)) {
		uni.showToast({
			title: '请输入正确的持卡人姓名',
			icon: 'none'
		})
        return false
      }

      // 身份证验证
      if (!/^\d{17}[\dX]$/.test(this.formData.idCard)) {
		uni.showToast({
			title: '请输入正确的身份证号码',
			icon: 'none'
		})
        return false
      }

      // 银行卡号验证
      const cardNumber = this.formData.cardNumber.replace(/\s/g, '')
      if (!/^\d{16,19}$/.test(cardNumber)) {
		uni.showToast({
			title: '请输入正确的银行卡号',
			icon: 'none'
		})
        return false
      }

      // 手机号验证
      if (!/^1[3-9]\d{9}$/.test(this.formData.phone)) {
		uni.showToast({
			title: '请输入正确的手机号码',
			icon: 'none'
		})
        return false
      }

      // 验证码验证
      if (!/^\d{6}$/.test(this.formData.verifyCode)) {
		uni.showToast({
			title: '请输入正确的验证码',
			icon: 'none'
		})
        return false
      }

      return true
    },

	
	getOrderPay: Debounce(function() {
		uni.showLoading({
			title: this.$t(`message.tips.loding`)
		});
		let that = this;
		let goPages = '/pages/goods/order_pay_status/index?order_id=' + this.orderNo;
		// alert(this.formData.verifyCode)
		orderPay({
			orderNo: this.orderNo,
			payChannel: that.payChannel,
			payType: that.payType,
			token: this.token,
			verifyCode: this.formData.verifyCode,
			scene: that.productType === 'normal' ? 0 : 1177
		}).then(res => {
			let jsConfig = res.data.jsConfig;
			switch (res.data.payType) {
				case 'quick':
					setTimeout(() => {
						uni.hideLoading();
						uni.reLaunch({
							url: goPages + '&status=1'
						});
					}, 2000)
					break;
			}
		}).catch(err => {
			uni.hideLoading();
			return that.$util.Tips({
				title: err
			});
		});
	}),
  }
}
</script>

<style lang="scss" scoped>
	.amount-section {
	  background-color: #fff;
	  padding: 30rpx;
	  border-radius: 12rpx;
	  margin-bottom: 20rpx;
	  
	  .amount-label {
	    font-size: 28rpx;
	    color: #666;
	  }
	  
	  .amount-value {
	    margin-top: 20rpx;
	    
	    .currency {
	      font-size: 36rpx;
	      color: #333;
	    }
	    
	    .number {
	      font-size: 48rpx;
	      font-weight: bold;
	      color: #333;
	    }
	  }
	}
	
	.agreement {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    font-size: 24rpx;
	    color: #666;
	    
	    .link {
	      color: #e93323;
	    }
	  }
.add-bank-card {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.form-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 0 30rpx;
  
  .form-item {
    display: flex;
    align-items: center;
    min-height: 100rpx;
    border-bottom: 2rpx solid #f5f5f5;
    
    .label {
      width: 180rpx;
      font-size: 28rpx;
      color: #333;
    }
    
    input {
      flex: 1;
      height: 100rpx;
      font-size: 28rpx;
    }
    
    .value {
      flex: 1;
      font-size: 28rpx;
      color: #333;
      
      &.placeholder {
        color: #999;
      }
    }
    
    .iconfont {
      font-size: 32rpx;
      color: #999;
    }
    
    &.verify-code {
      .send-code {
        width: 200rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        background-color: #e93323;
        color: #fff;
        font-size: 24rpx;
        border-radius: 30rpx;
        
        &.disabled {
          background-color: #ccc;
        }
      }
    }
  }
}

.tips {
  display: flex;
  align-items: center;
  padding: 30rpx;
  font-size: 24rpx;
  color: #999;
  
  .iconfont {
    margin-right: 10rpx;
    color: #e93323;
  }
}

.submit-section {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 30rpx;
  background-color: #fff;
  
  .submit-btn {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    background-color: #e93323;
    color: #fff;
    font-size: 32rpx;
    border-radius: 45rpx;
    
    &:disabled {
      background-color: #ccc;
    }
  }
}

.bank-popup {
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  
  .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100rpx;
    padding: 0 30rpx;
    font-size: 32rpx;
    border-bottom: 2rpx solid #f5f5f5;
    
    .close {
      color: #999;
    }
  }
  
  .bank-list {
    height: 600rpx;
    padding: 20rpx;
    
    .bank-item {
      display: flex;
      align-items: center;
      padding: 20rpx;
      
      .bank-icon {
        width: 60rpx;
        height: 60rpx;
        margin-right: 20rpx;
      }
      
      .bank-name {
        font-size: 28rpx;
        color: #333;
      }
    }
  }
}
</style>